<template>
	<view class="liveRoomBox" :style="{ height: pageHeight + 'px' }">
		<!-- 拉流 -->
		<video
			class="myVideo"
			id="videoBox"
			src="https://mp4.vjshi.com/2018-12-28/1083f3db90334f86e3fc3586b4472914.mp4"
			ref="videoBox"
			:show-center-play-btn="false"
			:enable-progress-gesture="false"
			:controls="false"
			:autoplay="true"
			:loop="true"
			:style="{ height: pageHeight + 'px' }"
		></video>
		<!-- 推流 -->
		<!-- <live-pusher id="livePusher" class="myVideo" url="https://mp4.vjshi.com/2018-12-28/1083f3db90334f86e3fc3586b4472914.mp4" mode="FHD"></live-pusher> -->
		<swiper :disable-touch="false" class="swiperBox" :style="{ height: pageHeight + 'px' }">
			<swiper-item @tap="swiperClick">
				<view class="swiper-item">
					<view v-if="!isPlay" class="isPlay iconzb icon-bofang">
						
					</view>
					<view class="headBox" @tap.stop="bubbling">
						<view class="shopFace">
							<image :src="liveData.shopImg" mode="widthFix"></image>
							<view v-if="liveData.verify" class="verify">认证商家</view>
						</view>
						<view class="indicator">
							<view class="name">{{ liveData.userName }}</view>
							<view class="mood">{{ liveData.moods }}人气</view>
						</view>
						<view class="attention" :class="liveData.attention ? 'on' : ''" @click="attentionClick(index)">
							<text class="iconzb icon-guanzhu"></text>
							{{ liveData.attention ? '已关注' : '关注' }}
						</view>
						<view class="room">
							<view class="title">{{ liveData.shopName }}</view>
							<view class="roomId">ID：{{ liveData.id }}</view>
						</view>
						<uni-icons type="closeempty" color="#fff" size="24" class="closeIcon"></uni-icons>
					</view>
					<view class="footerBox" @tap.stop="bubbling">
						<image src="/static/img/bag.png" mode="widthFix" class="shopBag" @click="showBag"></image>
						<input type="text" placeholder="跟主播聊点什么吧" class="inputBox" />
						<view class="btn moreBox" @tap="showMore=!showMore"><view class="iconzb icon-gengduo"></view>
						<view v-if="showMore" class="inner">
							<view class="inner-item">
								设置
							</view>
							<view class="inner-item">
								屏蔽
							</view>
						</view>
						</view>
						<view class="btn"><view class="iconzb icon-zhuanfa"></view></view>
						<view class="btn likeBox"  @click="likeClick">
							<view class="iconzb icon-xin" :class="isLike?'on':''"></view>
							<view class="likeStar">{{likeNum}}</view>
						</view>
					</view>
					<view class="newsBox" >
						<view class="news-item" v-for="(row, num) in liveData.news" :key="num">
							<text class="label" :class="'L' + row.level">
								<text class="iconzb icon-dengji-copy"></text>
								<text class="name">{{ row.level }}{{ row.name }}:</text>
							</text>
							<text class="cont">{{ row.cont }}</text>
						</view>
					</view>
					
					<view class="buyPlank" @tap.stop="bubbling">
						<view class="buyItem" v-for="(item, index) in liveData.buy" :key="index">
						<view class="">
							{{ item.name }}等{{ item.num }}人正在去买
							 
						</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>1</swiper-item>
		</swiper>
		<uni-popup type="bottom" ref="bagPop">
			<view class="bagBox">
				<view class="topHint">
					<view class="title">全部商品（{{ liveData.list.length }}）</view>
					<uni-icons type="closeempty" color="#000" size="24" class="closeIcon" @click="closeBag()"></uni-icons>
				</view>

				<scroll-view scroll-y="true" class="listBox">
					<view class="today-list" v-for="(row, index) in liveData.list" :key="index">
						<view class="mark">{{ liveData.list.length - (index ) }}</view>
						<image :src="row.img" mode="widthFix"></image>
						<view class="plank">
							<view class="title">{{ row.title }}</view>
							<view class="footer">
								<view class="price">¥ {{ row.price }}</view>
								<view class="seeBtn" @click="goGoodsInfo(row.id)">求讲解</view>
								<view class="seeBtn now" @click="goGoodsInfo(row.id)">购买</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			pageHeight: '200',
			context: null,
			isPlay:true,// 是否播放
			showMore:false,// 底部显示更多
			isLike:false,//点击喜欢
			likeNum:0,
			liveData: {
				id: '23121',
				shopImg: '/static/img/category/01.png',
				moods: '112322',
				verify: true,
				attention: false,
				userName: '李佳琪Ljq',
				shopName: '优品直播',
				list: [
					{
						img: '/static/img/goods/p1.jpg',
						title:
							'小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
						price: '1999'
					},
					{
						img: '/static/img/goods/p2.jpg',
						title: '小米电动滑板车1S',
						price: '2999'
					},
					{
						img: '/static/img/goods/p3.jpg',
						title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
						price: '1999'
					},
					{
						img: '/static/img/goods/p4.jpg',
						title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
						price: '999'
					},
					{
						img: '/static/img/goods/p3.jpg',
						title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
						cont: '高颜值设计，智能米家APP智联',
						price: '1999'
					},
					{
						img: '/static/img/goods/p4.jpg',
						title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
						price: '999'
					}
				],
				news: [
					{
						level: '1',
						name: '张大大',
						cont: '这款产品有没有专柜直接买啊！'
					},
					{
						level: '2',
						name: '土豆土豆',
						cont: '现在看来这个还是很火爆的一款啊买它买它买它！'
					},
					{
						level: '3',
						name: '番茄柠檬',
						cont: '现在看来这个还是很火爆的一款啊买它买它买它！'
					},
					{
						level: '4',
						name: '快乐每天',
						cont: '心痛如绞！'
					},
					{
						level: '5',
						name: '长腿欧巴',
						cont: '现在看来这个还是很火爆的一款啊买它买它买它！'
					}
				],
				buy: [
					{
						name: '张**大',
						num: '12'
					},
					{
						name: '流传*',
						num: '2'
					},
					{
						name: '欧阳**',
						num: '21'
					},
					{
						name: '流传*',
						num: '2'
					},
					{
						name: '流传*',
						num: '2'
					},
				]
			}
		};
	},
	onReady() {
		// 获取屏幕宽度/高度
		this.getScreenWidth();
		this.videoObj = uni.createVideoContext('videoBox', this)
		// this.context = uni.createLivePusherContext('livePusher', this);
	},
	methods: {
		// 直播推流
		// startLive() {
		// 	console.log(this.context);
		// 	this.context.start({
		// 		success: a => {
		// 			console.log(2);
		// 			console.log('livePusher.start:' + JSON.stringify(a));
		// 		},
		// 		fail: err => {
		// 			console.log(err);
		// 		}
		// 	});
		// },
		getScreenWidth() {
			var that = this;
			uni.getSystemInfo({
				success(res) {
					that.pageHeight = res.windowHeight;
				}
			});
		},
		attentionClick(index) {
			this.liveData.attention = !this.liveData.attention;
		},
		showBag() {
			this.$refs.bagPop.open();
		},
		closeBag() {
			this.$refs.bagPop.close();
		},
		// 阻止点击穿透
		bubbling() {
			console.log('阻止点击穿透')
		},
		// 视频开始
		startVideo() {
			// this.$refs.videoBox.play()
			this.videoObj.play()
		},
		// 暂停视频
		stopVideo() {
			// this.$refs.videoBox.pause()
			this.videoObj.pause()
		},
		swiperClick() {
			console.log(this.videoObj)
			this.videoObj.hideStatusBar()
			if(this.isPlay) {
				
				this.stopVideo()
				this.isPlay = false
			}else {
				this.startVideo()
				this.isPlay = true
			}
		},
		// 喜欢
		likeClick() {
			this.likeNum++ 
			if(!this.isLike) {
					this.isLike = true
			}
			setTimeout(()=>{
				this.isLike = false
			},500)
		}
	}
};
</script>

<style lang="scss">
.liveRoomBox {
	.myVideo {
		// position: fixed;
		// top: 50%;
		// right: 100%;
		width: 100%;
		z-index: -1;
		// display: none;
	}
	.swiperBox {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
		right: 0;
		background-color: transparent;
		color: #fff;
		.swiper-item {
			.isPlay {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				font-size: 100upx;
			}
			.headBox {
				padding: 20upx;
				display: flex;
				align-items: center;
				font-size: 24upx;
				.shopFace {
					position: relative;
					image {
						width: 80upx;
						border-radius: 50%;
					}
					.verify {
						position: absolute;
						bottom: 0upx;
						border-radius: 20upx;
						background: rgba(#000, 0.7);
						left: 50%;
						transform: translateX(-50%);
						white-space: nowrap;
						font-size: 18upx;
					}
				}
				.indicator {
					margin-left: 20upx;

					.name {
						font-size: 32upx;
						font-weight: bold;
					}
					.mood {
						color: #dddbde;
					}
				}
				.attention {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 120upx;
					height: 60upx;
					margin-left: 30upx;
					background-color: #f5721f;
					border-radius: 30upx;
					&.on {
						background-color: #f9363b;
					}
				}
				.room {
					border: 1upx solid #fff;
					text-align: center;
					margin-left: auto;
					padding: 10upx;
					border-radius: 20upx;
					line-height: 1.2;
				}
				.closeIcon {
					margin-left: 20upx;
				}
			}
			.footerBox {
				position: fixed;
				bottom: 20upx;
				width: 100%;
				display: flex;
				align-items: center;
				padding: 0 20upx;
				box-sizing: border-box;
				.shopBag {
					width: 70upx;
					margin-right: 20upx;
					margin-top: -40upx;
				}
				.inputBox {
					background: rgba($color: #000, $alpha: 0.3);
					border-radius: 30upx;
					padding: 10upx 10upx;
					flex-grow: 1;
					margin-right: 20upx;
				}
				.btn {
					background: rgba($color: #000, $alpha: 0.3);
					flex-shrink: 0;
					border-radius: 50%;
					width: 80upx;
					height: 80upx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 10upx;
					&.moreBox {
						position: relative;
						.inner {
							position: absolute;
							bottom: 100upx;
							left: 50%;
							transform: translateX(-50%);
							width: 100upx;
							font-size: 24upx;
							text-align: center;
							padding: 10upx;
							border-radius: 20upx;
							background:rgba($color: #000, $alpha: 0.7);
							.inner-item {
								padding: 10upx 0;
							}
							&::before {
								content: '';
								position: absolute;
								bottom: -38upx;
								left: 50%;
								transform: translateX(-50%);
								// background-color: red;
								border-top: 20upx solid rgba($color: #000, $alpha: 0.7);
								border-left: 20upx solid  transparent;
								border-right: 20upx solid  transparent;
								border-bottom: 20upx solid  transparent;
							}
						}
					}
					&.likeBox {
						.on {
							animation: tang 0.5s;
						}
						@keyframes tang {
							0% {
								transform: scale(1);
							}
							20% {
								transform: scale(1.5);
							}
							40% {
								transform: scale(0.75);
							}
							60% {
								transform: scale(1);
							}
							80% {
								transform: scale(1.3);
							}
							100% {
								transform: scale(1);
							}
						}
					}
					&:last-child {
						color: #ff113f;
						background-color: #fff;
						margin-right: 0upx;
						position: relative;
					}
					&:nth-child(3) {
						margin-left: auto;
					}
					.iconzb {
						font-size: 40upx;
					}
					.likeStar {
						background: linear-gradient(to right, #ed6a2d, #d22d1f);
						font-size: 20upx;
						width: 80upx;
						padding: 5upx 0;
						position: absolute;
						top: -40upx;
						color: #fff;
						border-radius: 20upx;
						text-align: center;
						overflow: hidden;
					}
				}
			}
			.newsBox {
				position: absolute;
				bottom: 200upx;
				left: 20upx;
				width: 350upx;
				height: 300upx;
				overflow: auto;
				font-size: 24upx;
				.news-item {
					background: rgba($color: #000000, $alpha: 0.3);
					border-radius: 20upx;
					margin-bottom: 20upx;

					.label {
						border-radius: 20upx;
						padding: 5upx;
						background-color: #007aff;
						&.L1 {
							background-color: #50c640;
						}
						&.L2 {
							background-color: #007aff;
						}
						&.L3 {
							background-color: #e9d120;
						}
						&.L4 {
							background-color: #ff1802;
						}
						&.L5 {
							background-color: #882bff;
						}
						.iconzb {
							flex-shrink: 0;
							font-size: 24upx;
						}
						.name {
							flex-shrink: 0;
						}
					}
				}
			}
			.buyPlank {
				// display: flex;
				font-size: 24upx;
				display: flex;
				position: absolute;
				bottom: 550upx;
				left: 20upx;
				width: 100%;
				animation: scrollText2 10s infinite cubic-bezier(1,0,0.5,1);
				.buyItem {
						width: 150%;
						overflow: hidden;
						flex-shrink: 0;
						& view {
							display: inline-block;
							padding: 5upx 10upx;
							border-radius: 20upx;
							background: rgba($color: #fbab51, $alpha: 0.7);
						}
				}
			}

			@keyframes scrollText2 {
				0% {
					transform: translateX(0);
				}
				20% {
					transform: translateX(-150%);
				}
				40% {
					transform: translateX(-300%);
				}
				60% {
					transform: translateX(-450%);
				}
				80% {
					transform: translateX(-600%);
				}
				100% {
					transform: translateX(-750%);
				}
			}
		}
	}
	.bagBox {
		background-color: #fff;
		height: 1000upx;
		overflow: auto;
		margin: 0 20upx;
		border-radius: 20upx 20upx 0 0;
		position: relative;
		.topHint {
			position: fixed;
			top: 0;
			left: 20upx;
			right: 20upx;
			height: 80upx;
			// width: 100%;
			box-sizing: border-box;
			padding: 10upx 20upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.listBox {
			height: 900upx;
			overflow: auto;
			margin-top: 80upx;
		}
		.today-list {
			display: flex;
			background-color: #fff;
			padding: 20upx;
			position: relative;
			border-bottom: 1px solid #eee;
			&:last-child {
				margin-bottom: 0upx;
				border-bottom: none;
			}
			.mark {
				position: absolute;
				top: 20upx;
				left: 20upx;
				width: 40upx;
				height: 40upx;
				line-height: 40upx;
				text-align: center;
				color: #fff;
				font-size: 26upx;
				border-radius: 20upx 0 0 0;
				background: rgba($color: #000000, $alpha: 0.5);
				z-index: 3;
			}
			image {
				width: 220upx;
				height: 220upx;
				flex-shrink: 0;
				display: block;
				border-radius: 20upx;
			}
			.plank {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				// justify-content: space-between;
				height: 220upx;
				margin-left: 20upx;
				overflow: hidden;
				.title {
					font-size: 32upx;
					margin-bottom: 10upx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				.footer {
					margin-top: auto;
					display: flex;
					align-items: center;
					.seeBtn:nth-child(2) {
						margin-left: auto;
					}
					.price {
						font-size: 38upx;
						font-weight: bold;
						color: #ff0000;
						text {
							font-size: 28upx;
							font-weight: 400;
						}
					}
					.seeBtn {
						margin: 0 10upx;
						font-size: 26upx;
						border: 1upx solid #da5635;
						padding: 5upx 20upx;
						border-radius: 50upx;
						color: #da5635;

						&.now {
							border: 1upx solid #e55633;
							color: #fff;
							background-color: #e55633;
						}
						&.after {
							border: 1upx solid #4ba68d;
							color: #4ba68d;
						}
					}
				}
			}
		}
	}
}
</style>
